import { Select, Spin, notification, Row, Col } from 'antd';
import React, { useEffect, useState } from 'react';
import isEmpty from 'lodash/isEmpty';
import { getType } from '@/utils/utils';

const { Option } = Select;
/**
 * 职位职级联动选择器
 * postType 职位类型默认值 职位类型中的`remark`字段 做`postRank` 字典的`dictCode`
 * postRank 职位职级默认值
 * postTypeRemark  默认请求类型列表的dictCode
 */
const SimpleCascade = React.forwardRef(({ onChange, value, getData, params, ...rest }, ref) => {
    const { postType = null, postRank = null, postTypeRemark = null } = value;
    const { selectProps } = rest;
    const [postTypeList, setPostTypeList] = useState([]);
    const [postRankList, setPostRankList] = useState([]);
    const [innerRemark, setInnerRemark] = useState(null); // 请求职级需求的 dictCode
    const [loading, setLoading] = useState(false);
    const fetchPostType = async () => {
        if (!postTypeRemark) return;
        setLoading(true);
        const result = await getData({ dictCode: postTypeRemark });
        // 找到从获取的List中 找到 dictValue 对应的 remark
        const { remark: tmpRemark } = result.find(v => v.dictValue === postType) || {};
        if (postType && isEmpty(tmpRemark)) {
            notification.error({
                message: '当前的职位类型字典中找不到postType对应的 remark'
            });
        }
        setLoading(false);
        setInnerRemark(tmpRemark);
        setPostTypeList(result || []);
    };
    const fetchPostRank = async () => {
        const rankParams = { dictCode: innerRemark };
        setLoading(true);
        const result = await getData(rankParams);
        setLoading(false);
        setPostRankList(result || []);
    };
    const handelPostType = (V, option) => {
        let result = '';
        if (getType(option) === 'array') {
            // eslint-disable-next-line prefer-destructuring
            result = option[0].props.remark;
        } else if (getType(option) === 'object') {
            // eslint-disable-next-line prefer-destructuring
            result = option.props.remark;
        }
        setInnerRemark(result);
        onChange({
            postType: V,
            postTypeRemark,
            postRank: undefined
        });
    };
    const handelPostRank = V => {
        onChange({
            postTypeRemark,
            postType,
            postRank: V
        });
    };
    useEffect(() => {
        fetchPostType();
    }, [postTypeRemark]);
    useEffect(() => {
        if (innerRemark) {
            fetchPostRank();
        } else {
            setPostRankList([]);
        }
    }, [innerRemark]);
    return (
        <div ref={ref}>
            <Spin spinning={loading}>
                <Row type="flex" style={{ flexWrap: 'nowrap' }} gutter={10}>
                    <Col span={12}>
                        <Select
                            onChange={handelPostType}
                            value={postType || undefined}
                            {...selectProps}
                            placeholder="请选择类型"
                            allowClear
                        >
                            {postTypeList.map(item => (
                                <Option key={item.dictValue} value={item.dictValue} remark={item.remark}>
                                    {item.dictName}
                                </Option>
                            ))}
                        </Select>
                    </Col>
                    <Col span={12}>
                        <Select
                            onChange={handelPostRank}
                            value={postRank || undefined}
                            {...selectProps}
                            placeholder="请选择职级"
                            allowClear
                        >
                            {postRankList.map(item => (
                                <Option key={item.dictValue}>{item.dictName}</Option>
                            ))}
                        </Select>
                    </Col>
                </Row>
            </Spin>
        </div>
    );
});

export default SimpleCascade;
